<script setup>
import { ref, onMounted } from 'vue'
import UbtUpload from '@/components/upload/UbtUpload.vue'
import UbtSelectMuti from '@/components/select/UbtSelMuti.vue'
import { selDictApi } from '@/common/api'

// 自动加载，判断权限
onMounted(() => {
  selKinds('', 1)
})

const kindList = ref([])
const selKinds = async (schName, kind) => {
  const res = await selDictApi({kind, schName: schName})
  if(res.code === 200) {
    kindList.value = res.data
  }
}

const kindIds = ref([])
const kindNames = ref([])
const setVals = (items, kind) => {
  items.forEach(item => {
    kindIds.value.push(item.selId)
    kindNames.value.push(item.selName)
  })
}


const selsByKey = (schName, kind) => {
  selKinds(schName, kind)
}

// setUrl 回调获取上传文件的地址
const imgObj = {id: '', name: '', url: '', thumb: ''}
const imgList = []
const imgRef = ref(imgObj)
const imgListRef = ref(imgList)
const fileObj = {id: '', name: '', url: ''}
const fileList = []
const fileRef = ref(fileObj)
const fileListRef = ref(fileList)
const setUrl = (kind, types, file) => {
  switch (kind) {
    case 1:
      imgRef.value = file
      break;
    case 2:
      imgListRef.value = file
      break;
    case 3:
      fileRef.value = file
      break;
    case 4:
      fileListRef.value = file
      break;
  }
}
</script>

<template>
  <div class="a">
    <div class="b">单图片上传实例</div>
    <UbtUpload :kind="1" :types="1" :file="imgRef" @setUrl="setUrl"></UbtUpload>
    <div class="c">上传的图片有：{{imgRef.url}}</div>
  </div>
  <div class="a">
    <div class="b">多图片上传实例</div>
    <UbtUpload :kind="2" :types="1" :files="imgListRef" @setUrl="setUrl"></UbtUpload>
    <div class="c">上传的图片有：{{imgListRef}}</div>
  </div>
  <div class="a">
    <div class="b">单文件上传实例</div>
    <UbtUpload :kind="3" :types="1" :file="fileRef" @setUrl="setUrl"></UbtUpload>
    <div class="c">上传的文件有：{{fileRef.name}}</div>
  </div>
  <div class="a">
    <div class="b">多文件上传实例</div>
    <UbtUpload :kind="4" :types="1" :files="fileListRef" @setUrl="setUrl"></UbtUpload>
    <div class="c">上传的文件有：{{fileListRef}}</div>
  </div>
  <div class="a">
    <ubt-select-muti :kind="1" :selList="kindList" :inboxed="false" @setVals="setVals" @selsByKey="selsByKey" />
  </div>
</template>

<style scoped>
.a {margin-bottom: 10px;}
.b {height: 35px; line-height: 35px; padding: 0 20px; margin: 10px 0; border-bottom: 1px solid #CCC;}
.c {padding: 20px;}
</style>
